<template>
    <div class="option_box">
      <div class="option_search">
        <div class="option_item">
          <div class="formitem">
            <el-select v-model="search.type" @change="emitSearch" slot="prepend" placeholder="请选择" style="width: 120px; border-radius: 0px !important">
              <el-option label="仅标题" value="仅标题"></el-option>
              <el-option label="内容+标题" value="内容+标题"></el-option>
            </el-select>
            <el-input
              :placeholder="search.type==='仅标题'?'请输入标题关键字查找':'请输入内容+标题关键字查找'"
              v-model="search.keywords"
              @input="handlerKeyWord"
              clearable
              class="input-with-select"
              style="width: 300px; border-radius: 0px !important"
            >
            </el-input>
            <el-button slot="append" type="primary" style="border-radius: 0px !important" @click="emitSearch">检索</el-button>
            <el-button style="border-radius: 0px !important" @click="handlerReset">重置</el-button>
          </div>
          <div class="formitem" style="margin-left: 20px">
            <el-select v-model="search.time_type" @change="emitSearch" slot="prepend" placeholder="请选择" style="width: 120px">
              <el-option label="创建时间" value="创建时间"></el-option>
              <el-option label="更新时间" value="更新时间"></el-option>
            </el-select>
            <el-date-picker
              v-model="timeArr"
              value-format="timestamp"
              @change="timeChange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            >
            </el-date-picker>
          </div>
        </div>
  
        <div class="option_item" style="margin-top: 10px">
          <div class="formitem">
            <div class="set_span set_span_one">公共知识库名称</div>
            <!--emitPath=false 回显该节点的值-->
            <el-cascader
              :key="setKey1"
              :options="options1"
              :show-all-levels="false"
              ref="cascader1Ref"
              @change="handlerCascader1"
              v-model="search.repo_id"
              :collapse-tags="true"
              placeholder="请选择公共知识库名称"
              :props="{ multiple: true, checkStrictly: true, emitPath: false, value: 'folder_id', label: 'folder_name' }"
              clearable
            ></el-cascader>
          </div>
          <div class="formitem">
            <div class="set_span">来源部门</div>
            <el-cascader
              :key="setKey2"
              :options="options2"
              :show-all-levels="false"
              ref="cascader2Ref"
              @change="handlerCascader2"
              :collapse-tags="true"
              placeholder="请选择来源部门"
              v-model="search.depart_id"
              :props="{ multiple: true, checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
              clearable
            ></el-cascader>
          </div>
          <div class="formitem">
            <div class="set_span">知识分类</div>
            <el-cascader
              :key="setKey3"
              :options="options3"
              :show-all-levels="false"
              ref="cascader3Ref"
              @change="handlerCascader3"
              :collapse-tags="true"
              placeholder="请选择知识分类"
              v-model="search.categories"
              :props="{ multiple: true, checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
              clearable
            ></el-cascader>
          </div>
          <div class="formitem">
            <div class="set_span">标签</div>
            <el-cascader
              :key="setKey4"
              :options="options4"
              :show-all-levels="false"
              ref="cascader4Ref"
              @change="handlerCascader4"
              :collapse-tags="true"
              placeholder="请选择标签"
              v-model="search.tags"
              :props="{ multiple: true, checkStrictly: true, emitPath: false, value: 'id', label: 'name' }"
              clearable
            ></el-cascader>
          </div>
        </div>
      </div>
  
      <div class="tipsoption">
        <div class="title">筛选条件：</div>
        <div class="option_list">
          <div class="option_list_item" v-for="(item, index) in repo_idSet" :key="'a' + index">
            公共知识库名称：{{ item.label }}
            <span class="del" @click="handlerDel(item.value, '公共知识库名称')">X</span>
          </div>
          <div class="option_list_item" v-for="(item, index) in depart_idSet" :key="'b' + index">
            来源部门：{{ item.label }}<span class="del" @click="handlerDel(item.value, '来源部门')">X</span>
          </div>
          <div class="option_list_item" v-for="(item, index) in categoriesSet" :key="'c' + index">
            知识分类：{{ item.label }}<span class="del" @click="handlerDel(item.value, '知识分类')">X</span>
          </div>
          <div class="option_list_item" v-for="(item, index) in tagsSet" :key="'d' + index">标签：{{ item.label }}<span class="del" @click="handlerDel(item.value, '标签')">X</span></div>
        </div>
        <div class="righttotal">
          共找到<span class="set_span_total">{{ total }}</span
          >个相关结果
        </div>
      </div>
      <div class="updateTime" v-if="!isShowEmpty">
        <div class="up_title">更新时间</div>
        <div :class="item.isActive ? 'uptime_item uptime_item_active' : 'uptime_item'" v-for="(item, index) in updataTypeArr" :key="index" @click="handlerUpTime(item.value)">{{ item.label }}</div>
      </div>
    </div>
  </template>
  
  <script>
  import { testDebucens } from '@/utils/index.js';
  import { knowledgeGetRepoList, knowledgeGetCompanyInfo, knowledgeGetCategory, knowledgeGetTags } from '@/api/index.js';
  export default {
    name: 'Option',
    props: {
      //查询数据总数
      total: {
        type: Number,
        default: 0,
      },
      isShowEmpty: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        timeArr: [],
        updataTypeArr: [
          {
            label: '按最新',
            value: '按最新',
            isActive: true,
          },
          {
            label: '按最早',
            value: '按最早',
            isActive: false,
          },
        ],
        search: {
          type: '仅标题', //搜索类型
          keywords: '',
          time_type: '创建时间', //时间类型
          start_time: null,
          end_time: null,
          tags: [], //标签
          categories: [], //知识分类
          depart_id: [], //来源部门
          repo_id: [], //公共知识库
          pageNum: 1,
          pageSize: 10,
          //更新时间
          order_type: '按最新', //按最新、按最早
        },
  
        //刷新el-cascader
        setKey1: 1, //公共知识库
        setKey2: 1, //来源部门
        setKey3: 1, //知识分类
        setKey4: 1, //标签
  
        options1: [], //公共知识库
        options2: [], //来源部门
        options3: [], //知识分类
        options4: [], //标签
  
        repo_idSet: [], //筛选条件 公共知识库
        depart_idSet: [], //筛选条件 来源部门
        categoriesSet: [], //筛选条件 知识分类
        tagsSet: [], //筛选条件 标签
      };
    },
    computed: {
      userInfo() {
        return JSON.parse(window.localStorage.getItem('LoginInfo'));
      },
    },
    mounted() {
      //数据初始化
      this.emitSearch();
      //获取初始option数组
      this.getOptions();
    },
    methods: {
      //获取选中的公共知识库/change
      handlerCascader1() {
        if (this.$refs.cascader1Ref) {
          this.$nextTick(() => {
            this.repo_idSet = [];
            this.repo_idSet = this.$refs.cascader1Ref.getCheckedNodes();
          });
        }
        this.emitSearch();
      },
      //获取选中的来源部门/change
      handlerCascader2() {
        if (this.$refs.cascader2Ref) {
          this.$nextTick(() => {
            this.depart_idSet = [];
            this.depart_idSet = this.$refs.cascader2Ref.getCheckedNodes();
          });
        }
        this.emitSearch();
      },
      //获取选中的知识分类/change
      handlerCascader3() {
        if (this.$refs.cascader3Ref) {
          this.$nextTick(() => {
            this.categoriesSet = [];
            this.categoriesSet = this.$refs.cascader3Ref.getCheckedNodes();
          });
        }
        this.emitSearch();
      },
      //获取选中的标签/change
      handlerCascader4() {
        if (this.$refs.cascader4Ref) {
          this.$nextTick(() => {
            this.tagsSet = [];
            this.tagsSet = this.$refs.cascader4Ref.getCheckedNodes();
          });
        }
        this.emitSearch();
      },
      //时间范围
      timeChange(val) {
        if (val && val.length) {
          this.search.start_time = val[0];
          this.search.end_time = val[1];
          this.emitSearch();
        } else {
          this.search.start_time = null;
          this.search.end_time = null;
          this.emitSearch();
        }
      },
      //option 初始化
      getOptions() {
        if(!this.userInfo){return false}
        //获取库名称
        knowledgeGetRepoList({
          usercode: this.userInfo.usercode,
          compid: this.userInfo.compid,
          params: {
            isRoot: true,
            username: this.userInfo.username,
          },
        }).then((res) => {
          if (res.data && res.data.length) {
            // console.log('res.data', res.data);
            this.options1 = this.handlerTree(res.data) ;
          }
        });
        //获取来源部门
        knowledgeGetCompanyInfo({
          usercode: this.userInfo.usercode,
          compid: this.userInfo.compid,
          params: {},
        }).then((res) => {
          // console.log('options2', res);
          if (res.data) {
            this.options2 = [];
            // this.options2.push(res.data);
            let arr=[res.data]
            this.options2 =this.handlerTree(arr)
          }
        });
  
        //获取知识分类
        knowledgeGetCategory({
          usercode: this.userInfo.usercode,
          compid: this.userInfo.compid,
          params: {},
        }).then((res) => {
          // console.log('options3',res);
          if (res.data&&res.data.length) {
            this.options3 = this.handlerTree(res.data)
          }
        });
  
        //获取标签
        knowledgeGetTags({
          usercode: this.userInfo.usercode,
          compid: this.userInfo.compid,
          params: {},
        }).then((res) => {
          // console.log('options4',res);
          if (res.data&&res.data.length) {
            this.options4 = this.handlerTree(res.data)
          }
        });
      },
  
      //递归处理tree for 循环
      handlerTree(arr) {
        arr.forEach((it) => {
          if (it.children && it.children.length === 0) {
            it.children = undefined;
          }
          if (it.children && it.children.length > 0) {
            this.handlerTree(it.children);
          }
        });
        return arr;
      },
  
      //关键字查找 INPUT事件
      handlerKeyWord() {
        testDebucens(() => {
          this.emitSearch();
        })();
      },
      //删除筛选条件
      handlerDel(val, type) {
        switch (type) {
          case '公共知识库名称':
            if (this.search.repo_id && this.search.repo_id.length) {
              this.search.repo_id.forEach((it, itx) => {
                if (it === val) {
                  this.search.repo_id.splice(itx, 1);
                }
              });
              this.setKey1++; //刷新dom
              this.handlerCascader1(); //更新选中
            }
            break;
          case '来源部门':
            if (this.search.depart_id && this.search.depart_id.length) {
              this.search.depart_id.forEach((it, itx) => {
                if (it === val) {
                  this.search.depart_id.splice(itx, 1);
                }
              });
              this.setKey2++; //刷新dom
              this.handlerCascader2(); //更新选中
            }
            break;
          case '知识分类':
            if (this.search.categories && this.search.categories.length) {
              this.search.categories.forEach((it, itx) => {
                if (it === val) {
                  this.search.categories.splice(itx, 1);
                }
              });
              this.setKey3++; //刷新dom
              this.handlerCascader3(); //更新选中
            }
            break;
          case '标签':
            if (this.search.tags && this.search.tags.length) {
              this.search.tags.forEach((it, itx) => {
                if (it === val) {
                  this.search.tags.splice(itx, 1);
                }
              });
              this.setKey4++; //刷新dom
              this.handlerCascader4(); //更新选中
            }
        }
      },
  
      //改变更新时间
      handlerUpTime(value) {
        this.updataTypeArr.map((it) => {
          if (it.value === value) {
            this.search.order_type = value;
            it.isActive = true;
            this.emitSearch();
          } else {
            it.isActive = false;
          }
        });
      },
      //参数改变
      emitSearch() {
        this.$emit('optionChange', this.search, true);
      },
      //重置
      handlerReset() {
        this.search = {
          type: '仅标题', //搜索类型
          keywords: '',
          time_type: '创建时间', //时间类型
          start_time: null,
          end_time: null,
          tags: [], //标签
          categories: [], //知识分类
          depart_id: [], //来源部门
          repo_id: [], //公共知识库
          pageNum: 1,
          pageSize: 10,
          //更新时间
          order_type: '按最新', //按最新、按最早
        };
        //重置更新时间
        this.$set(this.updataTypeArr, 0, {
          label: '按最新',
          value: '按最新',
          isActive: true,
        });
        this.$set(this.updataTypeArr, 1, {
          label: '按最早',
          value: '按最早',
          isActive: false,
        });
        this.repo_idSet = []; //筛选条件 公共知识库
        this.depart_idSet = []; //筛选条件 来源部门
        this.categoriesSet = []; //筛选条件 知识分类
        this.tagsSet = []; //筛选条件 标签
        this.emitSearch();
      },
    },
  };
  </script>
  <style>
  .el-cascader__tags .el-tag{
    /* background-color: #f40 !important; */
    min-width: 80px !important;
  }
  .el-cascader-node i{
    /* margin-bottom: 50px; */
    line-height: 8px;
  }
  /* ::-webkit-scrollbar{
  width: 8px;
  height: 4px;
  }
  ::-webkit-scrollbar-thumb{
  background-color: #9093994d;
  border-radius: 2px;
  box-shadow: inset 0 0 6px #0003;
  }
  ::-webkit-scrollbar-track{
  background-color: #0000000d;
  }  */
  </style>
  <style lang="stylus" scoped>
  
  .tipsoption
    background: rgba(53,125,255,0.1);
    border-radius: 4px 4px 0px 0px;
    min-height 50px
    margin 10px 0px
    padding 0px 10px
    font-size 14px
    display flex
    align-items center
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* 现代浏览器 */
    -ms-flex-align: center; /* IE 10 */
    align-items: center; /* 现代浏览器 */
    padding 10px 5px
    .title
      font-size 14px
      color #000
    .option_list
      display flex
      flex 1
      flex-wrap wrap
      padding-top 10px
      // flex-direction: row;
      // flex-wrap: nowrap;
      // overflow-x auto;
      margin 0 10px
      // &::-webkit-scrollbar
      //   width: 4px;
      //   height: 4px;
      // &::-webkit-scrollbar-thumb
      //   background-color: #9093994d;
      //   border-radius: 2px;
      //   box-shadow: inset 0 0 6px #0003;
      // &&::-webkit-scrollbar-thumb:hover
      //   box-shadow: inset 0 0 6px #a1a1a1;
      // &::-webkit-scrollbar-track//滚动条的背景
      //   background-color: #f6f6f7;
  
      .option_list_item
        background: rgba(53,125,255,0.1);
        border-radius: 2px;
        border: 1px solid #357DFF;
        flex-shrink: 0;
        display flex
        flex-wrap nowrap
        // align-items center
        margin-right 15px
        box-sizing border-box
        margin-bottom 10px
        padding 2px 4px
        cursor pointer
        color #357DFF
        .del
          margin 0px 5px
          // padding 0px 5px
        &:hover
          background: #357DFF;
          color #fff
          .del
            // background: #f20f20;
            color #fff
    .righttotal
      font-size 14px
      color #303133
      .set_span_total
        color red
        margin 0px 4px
  .option_search
    box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.2);
    border-radius: 0px 0px 4px 4px;
    padding 16px 0px
    .option_item
      display flex
      align-items center
      padding 0px 10px
      .formitem
        display flex
        align-items center
        border-radius 4px
        .set_span
          font-size 14px
          margin-right 6px
          margin-left 12px
          .set_span_one
            margin-left 0px
      >>>.el-input__inner
        border-radius 0px !important
  
  .updateTime
    display flex
    font-size 14px
    align-items center
    .uptime_item
     cursor pointer
     background: rgba(144,147,153,0.1);
     border-radius: 4px;
     border: 1px solid #909399;
     padding 3px 10px
     color: #909399;
     margin-left 16px
     &:hover
       border: 1px solid #357DFF;
    .uptime_item_active
     background: #357DFF;
     border: 1px solid #357DFF;
     color #fff
  </style>
  